<template>
    <div class="Header">
        <h1>Just Do It!!!!</h1>
        <div class="Top" :class="{ Showdow: isShow }">
            <img :src="srcvalue" @click="Cut">
            <input placeholder="What You Want To Do" class="Input" @focus="isShow = true" @blur="isShow = false"
                v-model="text" @keydown.enter="onEnter"/>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import downImg from '@/img/down.png';
import rightImg from '@/img/right.png';
import { useTodoStore } from '@/store/todo';
let todoStore = useTodoStore();
let text = ref('');
let srcvalue = ref(downImg);
let isShow = ref(false);
let Cut = () => {
    srcvalue.value = srcvalue.value === downImg ? rightImg : downImg;
}
let onEnter=()=>{
    if(text.value.trim!=='')
    {
        todoStore.addTodo(text.value);
        text.value = '';
    }
    else
    {
        alert('Please enter a valid task!');
    }
console.log(todoStore.todos);

}
// This will log the current todos in the console
</script>

<style scoped></style>